<template>
	<view class="mask" :class="mask == 'true' || mask == true ? 'mask-show' : ''" @click="Mclose" v-if="show"
		@touchmove.stop.prevent="preventTouchMove">
		<!-- 加载动画开始 --> <!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->
		<view class="loader loading8">
			<view class="loader-pacman"></view>
		</view>
	</view>
	<!-- 遮罩层-->
</template>

<script scoped="true">
	export default {
		name: "w-loading",
		props: {
			text: String,
			mask: Boolean | String,
			click: Boolean | String,
		},
		data() {
			return {
				show: false
			};
		},
		methods: {
			preventTouchMove() {
				console.log('stop user scroll it!');
				return;
			},
			Mclose() {
				if (this.click == 'false' || this.click == false) {
					this.show = false
				}
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			}
		}
	};
</script>

<style>
	.mask {
		/* pointer-events: none; */
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.mask.mask-show {
		background: rgba(7, 17, 27, .3);
	}

	.title {
		color: #fff;
		font-size: 28upx;
	}





	/* loading加载动画的css */
	.container {
		height: 280upx;
		width: 200upx;
	}

	.popsicle {
		height: 180upx;
		width: 120upx;
		border-radius: 55upx 55upx 10upx 10upx;
		position: relative;
		display: block;
		margin: 0 auto;
		overflow: hidden;
		-webkit-animation: float 2s ease-in infinite alternate;
		animation: float 2s ease-in infinite alternate;
	}

	.popsicle:before {
		content: "";
		height: 120%;
		width: 140%;
		position: absolute;
		left: -20%;
		top: -10%;
		background-image: -webkit-linear-gradient(bottom,
				#f63999 25%,
				#30dcf6 25%,
				#30dcf6 50%,
				#f2d200 50%,
				#f2d200 75%,
				#70ca5c 75%);
		background-image: linear-gradient(0deg,
				#f63999 25%,
				#30dcf6 25%,
				#30dcf6 50%,
				#f2d200 50%,
				#f2d200 75%,
				#70ca5c 75%);
		display: block;
		-webkit-transform: rotate(-20deg);
		transform: rotate(-20deg);
		-webkit-animation: magic 2.5s linear infinite;
		animation: magic 2.5s linear infinite;
	}

	@-webkit-keyframes magic {
		to {
			background-position: 0 210upx;
		}
	}

	@keyframes magic {
		to {
			background-position: 0 210upx;
		}
	}

	.popsicle:after {
		content: "";
		position: absolute;
		left: 10upx;
		bottom: 10upx;
		width: 13upx;
		height: 120upx;
		border-radius: 50upx;
		background: rgba(255, 255, 255, 0.35);
	}

	.stick {
		width: 38upx;
		height: 45upx;
		background: #e09c5f;
		border-radius: 0 0 12upx 12upx;
		display: block;
		margin: 0 auto;
		-webkit-animation: float 2s ease-in infinite alternate;
		animation: float 2s ease-in infinite alternate;
	}

	.stick:after {
		display: block;
		content: "";
		width: 100%;
		height: 14upx;
		background: rgba(0, 0, 0, 0.4);
	}

	@-webkit-keyframes float {
		to {
			-webkit-transform: translateY(20upx);
			transform: translateY(20upx);
		}
	}

	@keyframes float {
		to {
			-webkit-transform: translateY(20upx);
			transform: translateY(20upx);
		}
	}

	.shadow {
		width: 124upx;
		height: 35upx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 60upx / 22upx;
		display: block;
		margin: 0 auto;
		-webkit-transform: scaleY(0.7) translateY(30upx);
		transform: scaleY(0.7) translateY(30upx);
		-webkit-animation: shad 2s ease-in infinite alternate;
		animation: shad 2s ease-in infinite alternate;
	}

	@-webkit-keyframes shad {
		to {
			-webkit-transform: scaleX(0.9) scaleY(0.7) translateY(30upx);
			transform: scaleX(0.9) scaleY(0.7) translateY(30upx);
		}
	}

	@keyframes shad {
		to {
			-webkit-transform: scaleX(0.9) scaleY(0.7) translateY(30upx);
			transform: scaleX(0.9) scaleY(0.7) translateY(30upx);
		}
	}



	.loader {
		position: relative;
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin: 75upx;
		display: inline-block;
		vertical-align: middle;
	}

	.loading8 {
		border: 8upx dotted rgba(255, 255, 0, 1);
		-webkit-transition: all 1s ease;
		transition: all 1s ease;
		-webkit-animation: dotted-spin 1s linear infinite;
		animation: dotted-spin 1s linear infinite;
		border-bottom-width: 1upx;
		border-bottom-color: rgba(255, 255, 0, 0.3);
		border-left-width: 2upx;
		border-left-color: rgba(255, 255, 0, 0.5);
		border-top-width: 3upx;
		border-right-width: 4upx;
		border-top-color: rgba(255, 255, 0, 0.7);
	}

	.loading8 .loader-pacman,
	.loader-pacman {
		position: absolute;
		top: 40upx;
		left: 25upx;
		width: 0upx;
		height: 0upx;
		border-right: 12upx solid transparent;
		border-top: 12upx solid rgba(255, 255, 0, 1);
		border-left: 12upx solid rgba(255, 255, 0, 1);
		border-bottom: 12upx solid rgba(255, 255, 0, 1);
		border-top-left-radius: 12upx;
		border-top-right-radius: 12upx;
		border-bottom-left-radius: 12upx;
		border-bottom-right-radius: 12upx;
	}

	@-webkit-keyframes dotted-spin {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}

	@keyframes dotted-spin {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}
</style>